 <link rel="stylesheet" href="./demo.css">
 
 <!-- Tab选项卡1 -->
 <div class="box tab1">
    <!-- 标题 -->
    <ul>
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <!-- 内容 -->
    <ol>
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
    </ol>
</div>

<!-- Tab选项卡2 -->
<div class="box tab2">
   <!-- 标题 -->
   <ul>
       <li class="active">1</li>
       <li>2</li>
       <li>3</li>
   </ul>
   <!-- 内容 -->
   <ol>
       <li class="active">1</li>
       <li>2</li>
       <li>3</li>
   </ol>
</div>

<!-- Tab选项卡3 -->
<div class="box tab3">
   <!-- 标题 -->
   <ul>
       <li class="active">1</li>
       <li>2</li>
       <li>3</li>
   </ul>
   <!-- 内容 -->
   <ol>
       <li class="active">1</li>
       <li>2</li>
       <li>3</li>
   </ol>
</div>

<script src="./demo1.js"></script>
<script>
let tab1 = new Tab('.tab1')
let tab2 = new Tab('.tab2')
let tab3 = new Tab('.tab3')

// tab1.init()  手动调用 
/*
栈                     堆
Tab.prototype：地址1   地址1：{init:fn,titleOver, constructor,...}
tab1：地址2            地址2：{el: tab1标签对象, __proto__：地址1}
tab2：地址3            地址3：{el: tab2标签对象, __proto__：地址1}
*/
</script>